<!DOCTYPE html>

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">   
    <meta name="viewport"        
        content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>充值记录</title>
    <link rel="stylesheet" href="../public/css/footer.css">
    <link rel="stylesheet" href="../public/css/reset.css">
    <link rel="stylesheet" href="../public/css/all_use.css">
    <link rel="stylesheet" href="../public/css/cz.css">
    <script src="../public/js/utils/utils.js"></script>
    <script src="http://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<style>
</style>

<body>
    <div id="app">
        <div class="bjk">
            <div style="display: flex;justify-content: space-between;width: 95%;line-height: 50px;margin-left: 15px;">
                <div onclick="router('/app/index.html')">返回</div>
                <div style="margin-left: 20px;">充值记录</div>
                <div onclick="router('/app/wode.html')">个人中心</div>
            </div>
        </div>
        <div class="ssk">
            <input type="text" placeholder="搜索" class="ss" onchange="chuxun">
            <img src="../public/img/ss1.png" class="i" />
        </div>
        <div v-for="(item,i) in dataList" v-if="item.type=='支付成功'">
            <div class="k1">
                <div class="k2" v-if="item.flag==1">移动充值{{item.credit}}元</div>
                <div class="k2" v-if="item.flag==2">联通充值{{item.credit}}元</div>
                <div class="k2" v-if="item.flag==3">电信充值{{item.credit}}元</div>
                <div></div>
                <div class="k3"> {{item.tel}}</div>
                <div class="k4"> ￥{{item.payMoney}}</div>
                <div class="k5"> {{item.createTime}}</div>
                <div class="k6" v-if="item.state==0">正在充值</div>
                <div class="k6" v-if="item.state==1">充值成功</div>
            </div>
        </div>
    </div>
    <tabbar index="2"></tabbar>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="../public/js/components/tabbar.js"></script>
<script type="module">
    import ajax from "../public/js/api/api.js";
    var app = new Vue({
        el: '#app',
        data: {
            message: 'Hello Vue!',
            index: 0,
            dataList: [],
            // page: 1,
            account:'',
            text:"",
        },
        created() {
            this.findAccount2();
            setTimeout(() => {
                this.findByOrder();
            }, 500);
        },
        methods: {
            
            findByOrder: function () {
                ajax
                    .findByAccount({
                        // page: this.page,
                        accountId : this.account
                    })
                    .then((res) => {
                        if (res.data.code == 0) {
                            this.dataList = res.data.data
                            // console.log(res.data.data.list);
                        }
                    })
            },
            chuxun() {
                ajax
                    .findTel({
                        tel: this.text
                    })
                    .then({

                    })
            },
            findAccount2() {
                ajax
                    .findAccount2()
                    .then((res) => {
                        if (res.data.code == 0) {
                            this.account =res.data.data.id
                        }
                        // console.log(this.account);
                })
            }
        }
    })
</script>

</html>